<table class="table">
  <tbody>
    <tr>
      <td>头部</td>
      <td>包含当前列表标题</td>
    </tr>
    <tr>
      <td>列表</td>
      <td>多个列表部分请使用<code>section</code></td>
    </tr>
    <tr>
      <td>底部</td>
      <td>底部显示页码及其他提示信息</td>
    </tr>
  </tbody>
</table>
<p>图片链接</p>
<div contenteditable="false" spellcheck="false" class="example">
  <br>
  <ul class="breadcrumb breadcrumb-block">
    <li>
      <a href="#">Home</a>
    </li>
    <li>
      <a href="#">Library</a>
    </li>
    <li class="active">Data</li>
  </ul>
  <div class="list">
    <header>
      <div class="pull-right btn-group" data-toggle="buttons-radio"></div>
      <h3>Cards  <small>26 items</small></h3>
    </header>
    <section class="cards">
      <div class="col-md-4 col-sm-6 col-lg-3">
        <a href="###" class="card"><img src="img/img2.jpg" alt=""> <span class=
        "caption">关于图片的说明</span></a>
      </div>
      <div class="col-md-4 col-sm-6 col-lg-3">
        <a href="###" class="card"><img src="img/img2.jpg" alt=""> <span class=
        "caption">关于图片的超多多多多多多多多多多多多多多多多多多多多多多多多多说明</span></a>
      </div>
      <div class="col-md-4 col-sm-6 col-lg-3">
        <a href="###" class="card"><img src="img/img2.jpg" alt=""></a>
      </div>
      <div class="col-md-4 col-sm-6 col-lg-3">
        <a href="###" class="card"><img src="img/img2.jpg" alt=""></a>
      </div>
      <div class="col-md-4 col-sm-6 col-lg-3">
        <a href="###" class="card"><img src="img/img2.jpg" alt=""></a>
      </div>
      <div class="col-md-4 col-sm-6 col-lg-3">
        <a href="###" class="card"><img src="img/img2.jpg" alt=""></a>
      </div>
      <div class="col-md-4 col-sm-6 col-lg-3">
        <a href="###" class="card"><img src="img/img2.jpg" alt=""></a>
      </div>
      <div class="col-md-4 col-sm-6 col-lg-3">
        <a href="###" class="card"><img src="img/img2.jpg" alt=""></a>
      </div>
    </section>
    <footer>
      <ul class="pager">
        <li class="previous">
          <a href="#">« 上一页</a>
        </li>
        <li>
          <a href="#">1</a>
        </li>
        <li>
          <a href="#">⋯</a>
        </li>
        <li>
          <a href="#">6</a>
        </li>
        <li class="active">
          <a href="#">7</a>
        </li>
        <li>
          <a href="#">8</a>
        </li>
        <li>
          <a href="#">9</a>
        </li>
        <li>
          <a href="#">⋯</a>
        </li>
        <li>
          <a href="#">12</a>
        </li>
        <li class="next">
          <a href="#">下一页 »</a>
        </li>
      </ul>
    </footer>
  </div>
</div>
<p>图片链接＋标题</p>
<div contenteditable="false" spellcheck="false" class="example">
  <br>
  <ul class="breadcrumb breadcrumb-block">
    <li>
      <a href="#">Home</a>
    </li>
    <li>
      <a href="#">Library</a>
    </li>
    <li class="active">Data</li>
  </ul>
  <div class="list">
    <header>
      <div class="pull-right btn-group" data-toggle="buttons-radio"></div>
      <h3>Cards  <small>26 items</small></h3>
    </header>
    <section class="cards">
      <div class="col-md-4 col-sm-6 col-lg-3">
        <a href="###" class="card"><img src="img/img2.jpg" alt=""> <span class=
        "caption">关于图片的说明</span> <strong class=
        "card-heading">图片标题飞</strong></a>
      </div>
      <div class="col-md-4 col-sm-6 col-lg-3">
        <a href="###" class="card"><img src="img/img2.jpg" alt=""> <span class=
        "caption">Lorem ipsum dolor sit amet, consectetur adipisicing elit.
        Iste, voluptatem.</span> <strong class="card-heading">Lorem ipsum dolor
        sit.</strong></a>
      </div>
      <div class="col-md-4 col-sm-6 col-lg-3">
        <a href="###" class="card"><img src="img/img2.jpg" alt=""> <span class=
        "caption">Lorem ipsum dolor sit amet, consectetur adipisicing elit.
        Iste, voluptatem.</span> <strong class="card-heading">Lorem ipsum dolor
        sit.</strong></a>
      </div>
      <div class="col-md-4 col-sm-6 col-lg-3">
        <a href="###" class="card"><img src="img/img2.jpg" alt=""> <span class=
        "caption">Lorem ipsum dolor sit amet, consectetur adipisicing elit.
        Iste, voluptatem.</span> <strong class="card-heading">Lorem ipsum dolor
        sit.</strong></a>
      </div>
      <div class="col-md-4 col-sm-6 col-lg-3">
        <a href="###" class="card"><img src="img/img2.jpg" alt=""> <span class=
        "caption">Lorem ipsum dolor sit amet, consectetur adipisicing elit.
        Iste, voluptatem.</span>
        <h5 class="card-heading">Lorem ipsum dolor sit.</h5></a>
      </div>
      <div class="col-md-4 col-sm-6 col-lg-3">
        <a href="###" class="card"><img src="img/img2.jpg" alt=""> <span class=
        "caption">Lorem ipsum dolor sit amet, consectetur adipisicing elit.
        Iste, voluptatem.</span>
        <h5 class="card-heading">Lorem ipsum dolor sit.</h5></a>
      </div>
      <div class="col-md-4 col-sm-6 col-lg-3">
        <a href="###" class="card"><img src="img/img2.jpg" alt=""> <span class=
        "caption">Lorem ipsum dolor sit amet, consectetur adipisicing elit.
        Iste, voluptatem.</span>
        <h5 class="card-heading">Lorem ipsum dolor sit.</h5></a>
      </div>
      <div class="col-md-4 col-sm-6 col-lg-3">
        <a href="###" class="card"><img src="img/img2.jpg" alt=""> <span class=
        "caption">Lorem ipsum dolor sit amet, consectetur adipisicing elit.
        Iste, voluptatem.</span>
        <h5 class="card-heading">Lorem ipsum dolor sit.</h5></a>
      </div>
      <div class="col-md-4 col-sm-6 col-lg-3">
        <a href="###" class="card"><img src="img/img2.jpg" alt=""> <span class=
        "caption">Lorem ipsum dolor sit amet, consectetur adipisicing elit.
        Iste, voluptatem.</span>
        <h5 class="card-heading">Lorem ipsum dolor sit.</h5></a>
      </div>
      <div class="col-md-4 col-sm-6 col-lg-3">
        <a href="###" class="card"><img src="img/img2.jpg" alt=""> <span class=
        "caption">Lorem ipsum dolor sit amet, consectetur adipisicing elit.
        Iste, voluptatem.</span>
        <h5 class="card-heading">Lorem ipsum dolor sit.</h5></a>
      </div>
      <div class="col-md-4 col-sm-6 col-lg-3">
        <a href="###" class="card"><img src="img/img2.jpg" alt=""> <span class=
        "caption">Lorem ipsum dolor sit amet, consectetur adipisicing elit.
        Iste, voluptatem.</span>
        <h5 class="card-heading">Lorem ipsum dolor sit.</h5></a>
      </div>
      <div class="col-md-4 col-sm-6 col-lg-3">
        <a href="###" class="card"><img src="img/img2.jpg" alt=""> <span class=
        "caption">Lorem ipsum dolor sit amet, consectetur adipisicing elit.
        Iste, voluptatem.</span>
        <h5 class="card-heading">Lorem ipsum dolor sit.</h5></a>
      </div>
    </section>
    <section class="cards">
      <div class="col-md-4 col-sm-6 col-lg-3">
        <a href="###" class="card"><img src="img/img2.jpg" alt=""> <span class=
        "caption">关于图片的说明</span>
        <h5 class="card-heading">Lorem ipsum dolor sit amet, consectetur
        adipisicing elit. Quaerat, autem dolorum accusantium laboriosam
        architecto veritatis eaque pariatur quisquam ea odit.</h5>
        <div class="card-content text-muted">
          Lorem ipsum dolor sit amet, consectetur adipisicing elit. Vitae,
          officia similique enim culpa ipsam voluptas. Quibusdam, tempora autem
          voluptatem aliquid!
        </div></a>
      </div>
      <div class="col-md-4 col-sm-6 col-lg-3">
        <a href="###" class="card"><img src="img/img2.jpg" alt=""> <span class=
        "caption">Lorem ipsum dolor sit amet, consectetur adipisicing elit.
        Iste, voluptatem.</span>
        <h5 class="card-heading">Lorem ipsum dolor sit.</h5>
        <div class="card-content text-muted">
          Lorem ipsum dolor sit amet, consectetur adipisicing elit. Vitae,
          officia similique enim culpa ipsam voluptas. Quibusdam, tempora autem
          voluptatem aliquid!
        </div></a>
      </div>
      <div class="col-md-4 col-sm-6 col-lg-3">
        <a href="###" class="card"><img src="img/img2.jpg" alt=""> <span class=
        "caption">Lorem ipsum dolor sit amet, consectetur adipisicing elit.
        Iste, voluptatem.</span>
        <h5 class="card-heading">Lorem ipsum dolor sit.</h5>
        <div class="card-content text-muted">
          Lorem ipsum dolor sit amet, consectetur adipisicing elit. Vitae,
          officia similique enim culpa ipsam voluptas. Quibusdam, tempora autem
          voluptatem aliquid!
        </div></a>
      </div>
      <div class="col-md-4 col-sm-6 col-lg-3">
        <a href="###" class="card"><img src="img/img2.jpg" alt=""> <span class=
        "caption">Lorem ipsum dolor sit amet, consectetur adipisicing elit.
        Iste, voluptatem.</span>
        <h5 class="card-heading">Lorem ipsum dolor sit.</h5>
        <div class="card-content text-muted">
          Lorem ipsum dolor sit amet, consectetur adipisicing elit. Vitae,
          officia similique enim culpa ipsam voluptas. Quibusdam, tempora autem
          voluptatem aliquid!
        </div></a>
      </div>
      <div class="col-md-4 col-sm-6 col-lg-3">
        <a href="###" class="card"><img src="img/img2.jpg" alt=""> <span class=
        "caption">Lorem ipsum dolor sit amet, consectetur adipisicing elit.
        Iste, voluptatem.</span>
        <h5 class="card-heading">Lorem ipsum dolor sit.</h5>
        <div class="card-content text-muted">
          Lorem ipsum dolor sit amet, consectetur adipisicing elit. Vitae,
          officia similique enim culpa ipsam voluptas. Quibusdam, tempora autem
          voluptatem aliquid!
        </div></a>
      </div>
      <div class="col-md-4 col-sm-6 col-lg-3">
        <a href="###" class="card"><img src="img/img2.jpg" alt=""> <span class=
        "caption">Lorem ipsum dolor sit amet, consectetur adipisicing elit.
        Iste, voluptatem.</span>
        <h5 class="card-heading">Lorem ipsum dolor sit.</h5>
        <div class="card-content text-muted">
          Lorem ipsum dolor sit amet, consectetur adipisicing elit. Vitae,
          officia similique enim culpa ipsam voluptas. Quibusdam, tempora autem
          voluptatem aliquid!
        </div></a>
      </div>
      <div class="col-md-4 col-sm-6 col-lg-3">
        <a href="###" class="card"><img src="img/img2.jpg" alt=""> <span class=
        "caption">Lorem ipsum dolor sit amet, consectetur adipisicing elit.
        Iste, voluptatem.</span>
        <h5 class="card-heading">Lorem ipsum dolor sit.</h5>
        <div class="card-content text-muted">
          Lorem ipsum dolor sit amet, consectetur adipisicing elit. Vitae,
          officia similique enim culpa ipsam voluptas. Quibusdam, tempora autem
          voluptatem aliquid!
        </div></a>
      </div>
      <div class="col-md-4 col-sm-6 col-lg-3">
        <a href="###" class="card"><img src="img/img2.jpg" alt=""> <span class=
        "caption">Lorem ipsum dolor sit amet, consectetur adipisicing elit.
        Iste, voluptatem.</span>
        <h5 class="card-heading">Lorem ipsum dolor sit.</h5>
        <div class="card-content text-muted">
          Lorem ipsum dolor sit amet, consectetur adipisicing elit. Vitae,
          officia similique enim culpa ipsam voluptas. Quibusdam, tempora autem
          voluptatem aliquid!
        </div></a>
      </div>
    </section>
    <footer>
      <ul class="pager">
        <li class="previous">
          <a href="#">« 上一页</a>
        </li>
        <li>
          <a href="#">1</a>
        </li>
        <li>
          <a href="#">⋯</a>
        </li>
        <li>
          <a href="#">6</a>
        </li>
        <li class="active">
          <a href="#">7</a>
        </li>
        <li>
          <a href="#">8</a>
        </li>
        <li>
          <a href="#">9</a>
        </li>
        <li>
          <a href="#">⋯</a>
        </li>
        <li>
          <a href="#">12</a>
        </li>
        <li class="next">
          <a href="#">下一页 »</a>
        </li>
      </ul>
    </footer>
  </div>
</div>
<p>图片＋标题</p>
<div contenteditable="false" spellcheck="false" class="example">
  <br>
  <ul class="breadcrumb breadcrumb-block">
    <li>
      <a href="#">Home</a>
    </li>
    <li>
      <a href="#">Library</a>
    </li>
    <li class="active">Data</li>
  </ul>
  <div class="list">
    <header>
      <div class="pull-right btn-group" data-toggle="buttons-radio"></div>
      <h3>Cards  <small>26 items</small></h3>
    </header>
    <section class="cards">
      <div class="col-md-4 col-sm-6 col-lg-3 card">
        <img src="img/img2.jpg" alt=""> <span class="caption">关于图片的说明</span>
        <a href="###" class="card-heading"><strong>Lorem ipsum dolor
        sit.</strong></a>
      </div>
      <div class="col-md-4 col-sm-6 col-lg-3 card">
        <img src="img/img2.jpg" alt=""> <span class="caption">Lorem ipsum dolor
        sit amet, consectetur adipisicing elit. Iste, voluptatem.</span>
        <a href="###" class="card-heading"><strong>Lorem ipsum dolor
        sit.</strong></a>
      </div>
      <div class="col-md-4 col-sm-6 col-lg-3 card">
        <img src="img/img2.jpg" alt=""> <span class="caption">Lorem ipsum dolor
        sit amet, consectetur adipisicing elit. Iste, voluptatem.</span>
        <div class="card-heading">
          <span class="pull-right"><a href="###"></a></span> <a href=
          "###"><strong>Lorem ipsum dolor sit.</strong></a>
        </div>
      </div>
      <div class="col-md-4 col-sm-6 col-lg-3 card">
        <img src="img/img2.jpg" alt=""> <span class="caption">Lorem ipsum dolor
        sit amet, consectetur adipisicing elit. Iste, voluptatem.</span>
        <div class="card-heading">
          <span class="pull-right"><a href="###"> 123</a></span> <a href=
          "###"><strong>Lorem ipsum dolor sit.</strong></a>
        </div>
      </div>
      <div class="col-md-4 col-sm-6 col-lg-3 card">
        <img src="img/img2.jpg" alt=""> <span class="caption">Lorem ipsum dolor
        sit amet, consectetur adipisicing elit. Iste, voluptatem.</span>
        <div class="card-heading">
          <span class="pull-right"><a href="###"></a></span> <a href=
          "###"><strong>Lorem ipsum dolor sit.</strong></a>
        </div>
        <div class="card-actions">
          <a href="###">343</a> <span class="text-muted">  2013-11-12
          15:05:56</span>
        </div>
      </div>
      <div class="col-md-4 col-sm-6 col-lg-3 card">
        <img src="img/img2.jpg" alt=""> <span class="caption">Lorem ipsum dolor
        sit amet, consectetur adipisicing elit. Iste, voluptatem.</span>
        <a href="###" class="card-heading"><strong>Lorem ipsum dolor
        sit.</strong></a>
        <div class="card-actions">
          <a href="###">343</a> <span class="text-muted">  2013-11-12
          15:05:56</span>
        </div>
      </div>
      <div class="col-md-4 col-sm-6 col-lg-3 card">
        <img src="img/img2.jpg" alt=""> <span class="caption">Lorem ipsum dolor
        sit amet, consectetur adipisicing elit. Iste, voluptatem.</span>
        <a href="###" class="card-heading"><strong>Lorem ipsum dolor
        sit.</strong></a>
        <div class="card-actions">
          <span class="label">tag1</span> <a href="###" class="pull-right">
          343</a>
        </div>
      </div>
      <div class="col-md-4 col-sm-6 col-lg-3 card">
        <img src="img/img2.jpg" alt=""> <span class="caption">Lorem ipsum dolor
        sit amet, consectetur adipisicing elit. Iste, voluptatem.</span>
        <a href="###" class="card-heading"><strong>Lorem ipsum dolor
        sit.</strong></a>
        <div class="card-actions">
          <span class="label">tag1</span> <a href="###" class="pull-right">
          343</a>
        </div>
      </div>
    </section>
    <section class="cards">
      <div class="col-md-4 col-sm-6 col-lg-3 card">
        <img src="img/img2.jpg" alt=""> <span class="caption">关于图片的说明</span>
        <h5 class="card-heading">Lorem ipsum dolor sit amet, consectetur
        adipisicing elit. Quaerat, autem dolorum accusantium laboriosam
        architecto veritatis eaque pariatur quisquam ea odit.</h5>
        <div class="card-content text-muted">
          Lorem ipsum dolor sit amet, consectetur adipisicing elit. Vitae,
          officia similique enim culpa ipsam voluptas. Quibusdam, tempora autem
          voluptatem aliquid!
        </div>
        <div class="card-actions">
          <a href="###">343</a> <span class="text-muted">  2013-11-12
          15:05:56</span>
        </div>
      </div>
      <div class="col-md-4 col-sm-6 col-lg-3 card">
        <img src="img/img2.jpg" alt=""> <span class="caption">Lorem ipsum dolor
        sit amet, consectetur adipisicing elit. Iste, voluptatem.</span>
        <a href="###" class="card-heading"><strong>Lorem ipsum dolor
        sit.</strong></a>
        <div class="card-content text-muted">
          Lorem ipsum dolor sit amet, consectetur adipisicing elit. Vitae,
          officia similique enim culpa ipsam voluptas. Quibusdam, tempora autem
          voluptatem aliquid!
        </div>
        <div class="card-actions">
          <a href="###">343</a> <span class="text-muted">  2013-11-12
          15:05:56</span>
        </div>
      </div>
      <div class="col-md-4 col-sm-6 col-lg-3 card">
        <img src="img/img2.jpg" alt=""> <span class="caption">Lorem ipsum dolor
        sit amet, consectetur adipisicing elit. Iste, voluptatem.</span>
        <a href="###" class="card-heading"><strong>Lorem ipsum dolor
        sit.</strong></a>
        <div class="card-content text-muted">
          Lorem ipsum dolor sit amet, consectetur adipisicing elit. Vitae,
          officia similique enim culpa ipsam voluptas. Quibusdam, tempora autem
          voluptatem aliquid!
        </div>
        <div class="card-actions">
          <span class="label">tag1</span> <a href="###" class="pull-right">
          343</a>
        </div>
      </div>
      <div class="col-md-4 col-sm-6 col-lg-3 card">
        <img src="img/img2.jpg" alt=""> <span class="caption">Lorem ipsum dolor
        sit amet, consectetur adipisicing elit. Iste, voluptatem.</span>
        <a href="###" class="card-heading"><strong>Lorem ipsum dolor
        sit.</strong></a>
        <div class="card-content text-muted">
          Lorem ipsum dolor sit amet, consectetur adipisicing elit. Vitae,
          officia similique enim culpa ipsam voluptas. Quibusdam, tempora autem
          voluptatem aliquid!
        </div>
        <div class="card-actions">
          <span class="label">tag1</span> <a href="###" class="pull-right">
          343</a>
        </div>
      </div>
      <div class="col-md-4 col-sm-6 col-lg-3 card">
        <img src="img/img2.jpg" alt=""> <span class="caption">Lorem ipsum dolor
        sit amet, consectetur adipisicing elit. Iste, voluptatem.</span>
        <a href="###" class="card-heading"><strong>Lorem ipsum dolor
        sit.</strong></a>
        <div class="card-content text-muted">
          Lorem ipsum dolor sit amet, consectetur adipisicing elit. Vitae,
          officia similique enim culpa ipsam voluptas. Quibusdam, tempora autem
          voluptatem aliquid!
        </div>
        <div class="card-actions">
          <button class="btn">查看</button>
        </div>
      </div>
      <div class="col-md-4 col-sm-6 col-lg-3 card">
        <img src="img/img2.jpg" alt=""> <span class="caption">Lorem ipsum dolor
        sit amet, consectetur adipisicing elit. Iste, voluptatem.</span>
        <a href="###" class="card-heading"><strong>Lorem ipsum dolor
        sit.</strong></a>
        <div class="card-content text-muted">
          Lorem ipsum dolor sit amet, consectetur adipisicing elit. Vitae,
          officia similique enim culpa ipsam voluptas. Quibusdam, tempora autem
          voluptatem aliquid!
        </div>
        <div class="card-actions">
          <button class="btn btn-primary">订购</button>
        </div>
      </div>
      <div class="col-md-4 col-sm-6 col-lg-3 card">
        <img src="img/img2.jpg" alt=""> <span class="caption">Lorem ipsum dolor
        sit amet, consectetur adipisicing elit. Iste, voluptatem.</span>
        <a href="###" class="card-heading"><strong>Lorem ipsum dolor
        sit.</strong></a>
        <div class="card-content text-muted">
          Lorem ipsum dolor sit amet, consectetur adipisicing elit. Vitae,
          officia similique enim culpa ipsam voluptas. Quibusdam, tempora autem
          voluptatem aliquid!
        </div>
        <div class="card-actions">
          <button class="btn btn-success">参与讨论</button>
        </div>
      </div>
      <div class="col-md-4 col-sm-6 col-lg-3 card">
        <img src="img/img2.jpg" alt=""> <span class="caption">Lorem ipsum dolor
        sit amet, consectetur adipisicing elit. Iste, voluptatem.</span>
        <a href="###" class="card-heading"><strong>Lorem ipsum dolor
        sit.</strong></a>
        <div class="card-content text-muted">
          Lorem ipsum dolor sit amet, consectetur adipisicing elit. Vitae,
          officia similique enim culpa ipsam voluptas. Quibusdam, tempora autem
          voluptatem aliquid!
        </div>
        <div class="card-actions">
          <button class="btn btn-danger">喜欢</button>
        </div>
      </div>
    </section>
    <footer>
      <ul class="pager">
        <li class="previous">
          <a href="#">« 上一页</a>
        </li>
        <li>
          <a href="#">1</a>
        </li>
        <li>
          <a href="#">⋯</a>
        </li>
        <li>
          <a href="#">6</a>
        </li>
        <li class="active">
          <a href="#">7</a>
        </li>
        <li>
          <a href="#">8</a>
        </li>
        <li>
          <a href="#">9</a>
        </li>
        <li>
          <a href="#">⋯</a>
        </li>
        <li>
          <a href="#">12</a>
        </li>
        <li class="next">
          <a href="#">下一页 »</a>
        </li>
      </ul>
    </footer>
  </div>
</div>
<p>包装器内的图片＋标题</p>
<div contenteditable="false" spellcheck="false" class="example">
  <br>
  <ul class="breadcrumb breadcrumb-block">
    <li>
      <a href="#">Home</a>
    </li>
    <li>
      <a href="#">Library</a>
    </li>
    <li class="active">Data</li>
  </ul>
  <div class="list">
    <header>
      <div class="pull-right btn-group" data-toggle="buttons-radio"></div>
      <h3>Cards  <small>26 items</small></h3>
    </header>
    <section class="cards">
      <div class="col-md-4 col-sm-6 col-lg-3 card">
        <a href="#" class="media-wrapper"><img src="img/img1.png" alt=""></a>
        <span class="caption">关于图片的说明</span> <a href="###" class=
        "card-heading"><strong>Lorem ipsum dolor sit.</strong></a>
      </div>
      <div class="col-md-4 col-sm-6 col-lg-3 card">
        <div class="media-wrapper"><img src="img/img2.jpg" alt=
        ""></div><span class="caption">Lorem ipsum dolor sit amet, consectetur
        adipisicing elit. Iste, voluptatem.</span> <a href="###" class=
        "card-heading"><strong>Lorem ipsum dolor sit.</strong></a>
      </div>
      <div class="col-md-4 col-sm-6 col-lg-3 card">
        <div class="media-wrapper"><img src="img/img2.jpg" alt=
        ""></div><span class="caption">Lorem ipsum dolor sit amet, consectetur
        adipisicing elit. Iste, voluptatem.</span>
        <div class="card-heading">
          <span class="pull-right"><a href="###"></a></span> <a href=
          "###"><strong>Lorem ipsum dolor sit.</strong></a>
        </div>
      </div>
      <div class="col-md-4 col-sm-6 col-lg-3 card">
        <div class="media-wrapper"><img src="img/img2.jpg" alt=
        ""></div><span class="caption">Lorem ipsum dolor sit amet, consectetur
        adipisicing elit. Iste, voluptatem.</span>
        <div class="card-heading">
          <span class="pull-right"><a href="###"> 123</a></span> <a href=
          "###"><strong>Lorem ipsum dolor sit.</strong></a>
        </div>
      </div>
      <div class="col-md-4 col-sm-6 col-lg-3 card">
        <div class="media-wrapper"><img src="img/img2.jpg" alt=
        ""></div><span class="caption">Lorem ipsum dolor sit amet, consectetur
        adipisicing elit. Iste, voluptatem.</span>
        <div class="card-heading">
          <span class="pull-right"><a href="###"></a></span> <a href=
          "###"><strong>Lorem ipsum dolor sit.</strong></a>
        </div>
        <div class="card-actions">
          <a href="###">343</a> <span class="text-muted">  2013-11-12
          15:05:56</span>
        </div>
      </div>
      <div class="col-md-4 col-sm-6 col-lg-3 card">
        <div class="media-wrapper"><img src="img/img2.jpg" alt=
        ""></div><span class="caption">Lorem ipsum dolor sit amet, consectetur
        adipisicing elit. Iste, voluptatem.</span> <a href="###" class=
        "card-heading"><strong>Lorem ipsum dolor sit.</strong></a>
        <div class="card-actions">
          <a href="###">343</a> <span class="text-muted">  2013-11-12
          15:05:56</span>
        </div>
      </div>
      <div class="col-md-4 col-sm-6 col-lg-3 card">
        <div class="media-wrapper"><img src="img/img2.jpg" alt=
        ""></div><span class="caption">Lorem ipsum dolor sit amet, consectetur
        adipisicing elit. Iste, voluptatem.</span> <a href="###" class=
        "card-heading"><strong>Lorem ipsum dolor sit.</strong></a>
        <div class="card-actions">
          <span class="label">tag1</span> <a href="###" class="pull-right">
          343</a>
        </div>
      </div>
      <div class="col-md-4 col-sm-6 col-lg-3 card">
        <div class="media-wrapper"><img src="img/img2.jpg" alt=
        ""></div><span class="caption">Lorem ipsum dolor sit amet, consectetur
        adipisicing elit. Iste, voluptatem.</span> <a href="###" class=
        "card-heading"><strong>Lorem ipsum dolor sit.</strong></a>
        <div class="card-actions">
          <span class="label">tag1</span> <a href="###" class="pull-right">
          343</a>
        </div>
      </div>
    </section>
    <footer>
      <ul class="pager">
        <li class="previous">
          <a href="#">« 上一页</a>
        </li>
        <li>
          <a href="#">1</a>
        </li>
        <li>
          <a href="#">⋯</a>
        </li>
        <li>
          <a href="#">6</a>
        </li>
        <li class="active">
          <a href="#">7</a>
        </li>
        <li>
          <a href="#">8</a>
        </li>
        <li>
          <a href="#">9</a>
        </li>
        <li>
          <a href="#">⋯</a>
        </li>
        <li>
          <a href="#">12</a>
        </li>
        <li class="next">
          <a href="#">下一页 »</a>
        </li>
      </ul>
    </footer>
  </div>
</div>
<p>无边框卡片</p>
<div contenteditable="false" spellcheck="false" class="example">
  <br>
  <ul class="breadcrumb breadcrumb-block">
    <li>
      <a href="#">Home</a>
    </li>
    <li>
      <a href="#">Library</a>
    </li>
    <li class="active">Data</li>
  </ul>
  <div class="list">
    <header>
      <div class="pull-right btn-group" data-toggle="buttons-radio"></div>
      <h3>Cards  <small>26 items</small></h3>
    </header>
    <section class="cards cards-borderless">
      <div class="col-md-4 col-sm-6 col-lg-3 card">
        <div class="media-wrapper"><img src="img/img1.png" alt=
        ""></div><span class="caption">关于图片的说明</span> <a href="###" class=
        "card-heading"><strong>Lorem ipsum dolor sit.</strong></a>
      </div>
      <div class="col-md-4 col-sm-6 col-lg-3 card">
        <div class="media-wrapper"><img src="img/img2.jpg" alt=
        ""></div><span class="caption">Lorem ipsum dolor sit amet, consectetur
        adipisicing elit. Iste, voluptatem.</span> <a href="###" class=
        "card-heading"><strong>Lorem ipsum dolor sit.</strong></a>
      </div>
      <div class="col-md-4 col-sm-6 col-lg-3 card">
        <div class="media-wrapper"><img src="img/img2.jpg" alt=
        ""></div><span class="caption">Lorem ipsum dolor sit amet, consectetur
        adipisicing elit. Iste, voluptatem.</span>
        <div class="card-heading">
          <span class="pull-right"><a href="###"></a></span> <a href=
          "###"><strong>Lorem ipsum dolor sit.</strong></a>
        </div>
      </div>
      <div class="col-md-4 col-sm-6 col-lg-3 card">
        <div class="media-wrapper"><img src="img/img2.jpg" alt=
        ""></div><span class="caption">Lorem ipsum dolor sit amet, consectetur
        adipisicing elit. Iste, voluptatem.</span>
        <div class="card-heading">
          <span class="pull-right"><a href="###"> 123</a></span> <a href=
          "###"><strong>Lorem ipsum dolor sit.</strong></a>
        </div>
      </div>
      <div class="col-md-4 col-sm-6 col-lg-3 card">
        <div class="media-wrapper"><img src="img/img2.jpg" alt=
        ""></div><span class="caption">Lorem ipsum dolor sit amet, consectetur
        adipisicing elit. Iste, voluptatem.</span>
        <div class="card-heading">
          <span class="pull-right"><a href="###"></a></span> <a href=
          "###"><strong>Lorem ipsum dolor sit.</strong></a>
        </div>
        <div class="card-actions">
          <a href="###">343</a> <span class="text-muted">  2013-11-12
          15:05:56</span>
        </div>
      </div>
      <div class="col-md-4 col-sm-6 col-lg-3 card">
        <div class="media-wrapper"><img src="img/img2.jpg" alt=
        ""></div><span class="caption">Lorem ipsum dolor sit amet, consectetur
        adipisicing elit. Iste, voluptatem.</span> <a href="###" class=
        "card-heading"><strong>Lorem ipsum dolor sit.</strong></a>
        <div class="card-actions">
          <a href="###">343</a> <span class="text-muted">  2013-11-12
          15:05:56</span>
        </div>
      </div>
      <div class="col-md-4 col-sm-6 col-lg-3 card">
        <div class="media-wrapper"><img src="img/img2.jpg" alt=
        ""></div><span class="caption">Lorem ipsum dolor sit amet, consectetur
        adipisicing elit. Iste, voluptatem.</span> <a href="###" class=
        "card-heading"><strong>Lorem ipsum dolor sit.</strong></a>
        <div class="card-actions">
          <span class="label">tag1</span> <a href="###" class="pull-right">
          343</a>
        </div>
      </div>
      <div class="col-md-4 col-sm-6 col-lg-3 card">
        <div class="media-wrapper"><img src="img/img2.jpg" alt=
        ""></div><span class="caption">Lorem ipsum dolor sit amet, consectetur
        adipisicing elit. Iste, voluptatem.</span> <a href="###" class=
        "card-heading"><strong>Lorem ipsum dolor sit.</strong></a>
        <div class="card-actions">
          <span class="label">tag1</span> <a href="###" class="pull-right">
          343</a>
        </div>
      </div>
    </section>
    <section class="cards cards-borderless">
      <div class="col-md-4 col-sm-6 col-lg-3 card">
        <img src="img/img2.jpg" alt=""> <span class="caption">关于图片的说明</span>
        <h5 class="card-heading">Lorem ipsum dolor sit amet, consectetur
        adipisicing elit. Quaerat, autem dolorum accusantium laboriosam
        architecto veritatis eaque pariatur quisquam ea odit.</h5>
        <div class="card-content text-muted">
          Lorem ipsum dolor sit amet, consectetur adipisicing elit. Vitae,
          officia similique enim culpa ipsam voluptas. Quibusdam, tempora autem
          voluptatem aliquid!
        </div>
        <div class="card-actions">
          <a href="###">343</a> <span class="text-muted">  2013-11-12
          15:05:56</span>
        </div>
      </div>
      <div class="col-md-4 col-sm-6 col-lg-3 card">
        <img src="img/img2.jpg" alt=""> <span class="caption">Lorem ipsum dolor
        sit amet, consectetur adipisicing elit. Iste, voluptatem.</span>
        <a href="###" class="card-heading"><strong>Lorem ipsum dolor
        sit.</strong></a>
        <div class="card-content text-muted">
          Lorem ipsum dolor sit amet, consectetur adipisicing elit. Vitae,
          officia similique enim culpa ipsam voluptas. Quibusdam, tempora autem
          voluptatem aliquid!
        </div>
        <div class="card-actions">
          <a href="###">343</a> <span class="text-muted">  2013-11-12
          15:05:56</span>
        </div>
      </div>
      <div class="col-md-4 col-sm-6 col-lg-3 card">
        <img src="img/img2.jpg" alt=""> <span class="caption">Lorem ipsum dolor
        sit amet, consectetur adipisicing elit. Iste, voluptatem.</span>
        <a href="###" class="card-heading"><strong>Lorem ipsum dolor
        sit.</strong></a>
        <div class="card-content text-muted">
          Lorem ipsum dolor sit amet, consectetur adipisicing elit. Vitae,
          officia similique enim culpa ipsam voluptas. Quibusdam, tempora autem
          voluptatem aliquid!
        </div>
        <div class="card-actions">
          <span class="label">tag1</span> <a href="###" class="pull-right">
          343</a>
        </div>
      </div>
      <div class="col-md-4 col-sm-6 col-lg-3 card">
        <img src="img/img2.jpg" alt=""> <span class="caption">Lorem ipsum dolor
        sit amet, consectetur adipisicing elit. Iste, voluptatem.</span>
        <a href="###" class="card-heading"><strong>Lorem ipsum dolor
        sit.</strong></a>
        <div class="card-content text-muted">
          Lorem ipsum dolor sit amet, consectetur adipisicing elit. Vitae,
          officia similique enim culpa ipsam voluptas. Quibusdam, tempora autem
          voluptatem aliquid!
        </div>
        <div class="card-actions">
          <span class="label">tag1</span> <a href="###" class="pull-right">
          343</a>
        </div>
      </div>
      <div class="col-md-4 col-sm-6 col-lg-3 card">
        <img src="img/img2.jpg" alt=""> <span class="caption">Lorem ipsum dolor
        sit amet, consectetur adipisicing elit. Iste, voluptatem.</span>
        <a href="###" class="card-heading"><strong>Lorem ipsum dolor
        sit.</strong></a>
        <div class="card-content text-muted">
          Lorem ipsum dolor sit amet, consectetur adipisicing elit. Vitae,
          officia similique enim culpa ipsam voluptas. Quibusdam, tempora autem
          voluptatem aliquid!
        </div>
        <div class="card-actions">
          <button class="btn">查看</button>
        </div>
      </div>
      <div class="col-md-4 col-sm-6 col-lg-3 card">
        <img src="img/img2.jpg" alt=""> <span class="caption">Lorem ipsum dolor
        sit amet, consectetur adipisicing elit. Iste, voluptatem.</span>
        <a href="###" class="card-heading"><strong>Lorem ipsum dolor
        sit.</strong></a>
        <div class="card-content text-muted">
          Lorem ipsum dolor sit amet, consectetur adipisicing elit. Vitae,
          officia similique enim culpa ipsam voluptas. Quibusdam, tempora autem
          voluptatem aliquid!
        </div>
        <div class="card-actions">
          <button class="btn btn-primary">订购</button>
        </div>
      </div>
      <div class="col-md-4 col-sm-6 col-lg-3 card">
        <img src="img/img2.jpg" alt=""> <span class="caption">Lorem ipsum dolor
        sit amet, consectetur adipisicing elit. Iste, voluptatem.</span>
        <a href="###" class="card-heading"><strong>Lorem ipsum dolor
        sit.</strong></a>
        <div class="card-content text-muted">
          Lorem ipsum dolor sit amet, consectetur adipisicing elit. Vitae,
          officia similique enim culpa ipsam voluptas. Quibusdam, tempora autem
          voluptatem aliquid!
        </div>
        <div class="card-actions">
          <button class="btn btn-success">参与讨论</button>
        </div>
      </div>
      <div class="col-md-4 col-sm-6 col-lg-3 card">
        <img src="img/img2.jpg" alt=""> <span class="caption">Lorem ipsum dolor
        sit amet, consectetur adipisicing elit. Iste, voluptatem.</span>
        <a href="###" class="card-heading"><strong>Lorem ipsum dolor
        sit.</strong></a>
        <div class="card-content text-muted">
          Lorem ipsum dolor sit amet, consectetur adipisicing elit. Vitae,
          officia similique enim culpa ipsam voluptas. Quibusdam, tempora autem
          voluptatem aliquid!
        </div>
        <div class="card-actions">
          <button class="btn btn-danger">喜欢</button>
        </div>
      </div>
    </section>
    <footer>
      <ul class="pager">
        <li class="previous">
          <a href="#">« 上一页</a>
        </li>
        <li>
          <a href="#">1</a>
        </li>
        <li>
          <a href="#">⋯</a>
        </li>
        <li>
          <a href="#">6</a>
        </li>
        <li class="active">
          <a href="#">7</a>
        </li>
        <li>
          <a href="#">8</a>
        </li>
        <li>
          <a href="#">9</a>
        </li>
        <li>
          <a href="#">⋯</a>
        </li>
        <li>
          <a href="#">12</a>
        </li>
        <li class="next">
          <a href="#">下一页 »</a>
        </li>
      </ul>
    </footer>
  </div>
</div>
<p>更为紧凑的模式</p>
<p><code>.cards-condensed</code></p>
<div contenteditable="false" spellcheck="false" class="example">
  <br>
  <ul class="breadcrumb breadcrumb-block">
    <li>
      <a href="#">Home</a>
    </li>
    <li>
      <a href="#">Library</a>
    </li>
    <li class="active">Data</li>
  </ul>
  <div class="list">
    <header>
      <div class="pull-right btn-group" data-toggle="buttons-radio"></div>
      <h3>Cards  <small>26 items</small></h3>
    </header>
    <section class="cards cards-condensed">
      <div class="col-md-4 col-sm-6 col-lg-3">
        <a href="###" class="card"><img src="img/img2.jpg" alt=""> <span class=
        "caption">关于图片的说明</span></a>
      </div>
      <div class="col-md-4 col-sm-6 col-lg-3">
        <a href="###" class="card"><img src="img/img2.jpg" alt=""> <span class=
        "caption">关于图片的超多多多多多多多多多多多多多多多多多多多多多多多多多说明</span></a>
      </div>
      <div class="col-md-4 col-sm-6 col-lg-3">
        <a href="###" class="card"><img src="img/img2.jpg" alt=""></a>
      </div>
      <div class="col-md-4 col-sm-6 col-lg-3">
        <a href="###" class="card"><img src="img/img2.jpg" alt=""></a>
      </div>
      <div class="col-md-4 col-sm-6 col-lg-3 card">
        <img src="img/img2.jpg" alt=""> <a href="###" class=
        "card-heading"><strong>Lorem ipsum dolor sit.</strong></a>
        <div class="card-reveal">
          <h5 class="card-heading">Lorem ipsum dolor sit amet, consectetur
          adipisicing elit. Quaerat, autem dolorum accusantium laboriosam
          architecto veritatis eaque pariatur quisquam ea odit.</h5>
          <div class="card-actions">
            <a href="###">343</a> <span class="text-muted">  2013-11-12
            15:05:56</span>
          </div>
          <div class="card-content text-muted">
            Lorem ipsum dolor sit amet, consectetur adipisicing elit. Vitae,
            officia similique enim culpa ipsam voluptas. Quibusdam, tempora
            autem voluptatem aliquid!
          </div>
          <div class="card-actions">
            <button class="btn btn-success">参与讨论</button>
          </div>
        </div>
      </div>
      <div class="col-md-4 col-sm-6 col-lg-3 card">
        <img src="img/img2.jpg" alt=""> <a href="###" class=
        "card-heading"><strong>Lorem ipsum dolor sit.</strong></a>
        <div class="card-reveal">
          <h5 class="card-heading">Lorem ipsum dolor sit amet, consectetur
          adipisicing elit. Quaerat, autem dolorum accusantium laboriosam
          architecto veritatis eaque pariatur quisquam ea odit.</h5>
          <div class="card-actions">
            <a href="###">343</a> <span class="text-muted">  2013-11-12
            15:05:56</span>
          </div>
          <div class="card-content text-muted">
            Lorem ipsum dolor sit amet, consectetur adipisicing elit. Vitae,
            officia similique enim culpa ipsam voluptas. Quibusdam, tempora
            autem voluptatem aliquid!
          </div>
          <div class="card-actions">
            <button class="btn btn-success">参与讨论</button>
          </div>
        </div>
      </div>
      <div class="col-md-4 col-sm-6 col-lg-3 card">
        <img src="img/img2.jpg" alt="">
        <div class="card-heading">
          <span class="pull-right"><a href="###"></a></span> <a href=
          "###"><strong>Lorem ipsum dolor sit.</strong></a>
        </div>
        <div class="card-reveal">
          <h5 class="card-heading">Lorem ipsum dolor sit amet, consectetur
          adipisicing elit. Quaerat, autem dolorum accusantium laboriosam
          architecto veritatis eaque pariatur quisquam ea odit.</h5>
          <div class="card-actions">
            <a href="###">343</a> <span class="text-muted">  2013-11-12
            15:05:56</span>
          </div>
          <div class="card-content text-muted">
            Lorem ipsum dolor sit amet, consectetur adipisicing elit. Vitae,
            officia similique enim culpa ipsam voluptas. Quibusdam, tempora
            autem voluptatem aliquid!
          </div>
          <div class="card-actions">
            <button class="btn btn-success">参与讨论</button>
          </div>
        </div>
      </div>
      <div class="col-md-4 col-sm-6 col-lg-3 card">
        <img src="img/img2.jpg" alt="">
        <div class="card-heading">
          <span class="pull-right"><a href="###"> 123</a></span> <a href=
          "###"><strong>Lorem ipsum dolor sit.</strong></a>
        </div>
        <div class="card-reveal">
          <h5 class="card-heading">Lorem ipsum dolor sit amet, consectetur
          adipisicing elit. Quaerat, autem dolorum accusantium laboriosam
          architecto veritatis eaque pariatur quisquam ea odit.</h5>
          <div class="card-actions">
            <a href="###">343</a> <span class="text-muted">  2013-11-12
            15:05:56</span>
          </div>
          <div class="card-content text-muted">
            Lorem ipsum dolor sit amet, consectetur adipisicing elit. Vitae,
            officia similique enim culpa ipsam voluptas. Quibusdam, tempora
            autem voluptatem aliquid!
          </div>
          <div class="card-actions">
            <button class="btn btn-success">参与讨论</button>
          </div>
        </div>
      </div>
      <div class="col-md-4 col-sm-6 col-lg-3 card">
        <img src="img/img2.jpg" alt=""> <span class="caption">Lorem ipsum dolor
        sit amet, consectetur adipisicing elit. Iste, voluptatem.</span>
        <div class="card-heading">
          <span class="pull-right"><a href="###"></a></span> <a href=
          "###"><strong>Lorem ipsum dolor sit.</strong></a>
        </div>
        <div class="card-actions">
          <a href="###">343</a> <span class="text-muted">  2013-11-12
          15:05:56</span>
        </div>
      </div>
      <div class="col-md-4 col-sm-6 col-lg-3 card">
        <img src="img/img2.jpg" alt=""> <span class="caption">Lorem ipsum dolor
        sit amet, consectetur adipisicing elit. Iste, voluptatem.</span>
        <a href="###" class="card-heading"><strong>Lorem ipsum dolor
        sit.</strong></a>
        <div class="card-actions">
          <a href="###">343</a> <span class="text-muted">  2013-11-12
          15:05:56</span>
        </div>
      </div>
      <div class="col-md-4 col-sm-6 col-lg-3 card">
        <img src="img/img2.jpg" alt=""> <span class="caption">Lorem ipsum dolor
        sit amet, consectetur adipisicing elit. Iste, voluptatem.</span>
        <a href="###" class="card-heading"><strong>Lorem ipsum dolor
        sit.</strong></a>
        <div class="card-actions">
          <span class="label">tag1</span> <a href="###" class="pull-right">
          343</a>
        </div>
      </div>
      <div class="col-md-4 col-sm-6 col-lg-3 card">
        <img src="img/img2.jpg" alt=""> <span class="caption">Lorem ipsum dolor
        sit amet, consectetur adipisicing elit. Iste, voluptatem.</span>
        <a href="###" class="card-heading"><strong>Lorem ipsum dolor
        sit.</strong></a>
        <div class="card-actions">
          <span class="label">tag1</span> <a href="###" class="pull-right">
          343</a>
        </div>
      </div>
    </section>
    <section class="cards cards-condensed">
      <div class="col-md-4 col-sm-6 col-lg-3 card">
        <img src="img/img2.jpg" alt=""> <span class="caption">关于图片的说明</span>
        <h5 class="card-heading">Lorem ipsum dolor sit amet, consectetur
        adipisicing elit. Quaerat, autem dolorum accusantium laboriosam
        architecto veritatis eaque pariatur quisquam ea odit.</h5>
        <div class="card-content text-muted">
          Lorem ipsum dolor sit amet, consectetur adipisicing elit. Vitae,
          officia similique enim culpa ipsam voluptas. Quibusdam, tempora autem
          voluptatem aliquid!
        </div>
        <div class="card-actions">
          <a href="###">343</a> <span class="text-muted">  2013-11-12
          15:05:56</span>
        </div>
      </div>
      <div class="col-md-4 col-sm-6 col-lg-3 card">
        <img src="img/img2.jpg" alt=""> <span class="caption">Lorem ipsum dolor
        sit amet, consectetur adipisicing elit. Iste, voluptatem.</span>
        <a href="###" class="card-heading"><strong>Lorem ipsum dolor
        sit.</strong></a>
        <div class="card-content text-muted">
          Lorem ipsum dolor sit amet, consectetur adipisicing elit. Vitae,
          officia similique enim culpa ipsam voluptas. Quibusdam, tempora autem
          voluptatem aliquid!
        </div>
        <div class="card-actions">
          <a href="###">343</a> <span class="text-muted">  2013-11-12
          15:05:56</span>
        </div>
      </div>
      <div class="col-md-4 col-sm-6 col-lg-3 card">
        <img src="img/img2.jpg" alt=""> <span class="caption">Lorem ipsum dolor
        sit amet, consectetur adipisicing elit. Iste, voluptatem.</span>
        <a href="###" class="card-heading"><strong>Lorem ipsum dolor
        sit.</strong></a>
        <div class="card-content text-muted">
          Lorem ipsum dolor sit amet, consectetur adipisicing elit. Vitae,
          officia similique enim culpa ipsam voluptas. Quibusdam, tempora autem
          voluptatem aliquid!
        </div>
        <div class="card-actions">
          <span class="label">tag1</span> <a href="###" class="pull-right">
          343</a>
        </div>
      </div>
      <div class="col-md-4 col-sm-6 col-lg-3 card">
        <img src="img/img2.jpg" alt=""> <span class="caption">Lorem ipsum dolor
        sit amet, consectetur adipisicing elit. Iste, voluptatem.</span>
        <a href="###" class="card-heading"><strong>Lorem ipsum dolor
        sit.</strong></a>
        <div class="card-content text-muted">
          Lorem ipsum dolor sit amet, consectetur adipisicing elit. Vitae,
          officia similique enim culpa ipsam voluptas. Quibusdam, tempora autem
          voluptatem aliquid!
        </div>
        <div class="card-actions">
          <span class="label">tag1</span> <a href="###" class="pull-right">
          343</a>
        </div>
      </div>
      <div class="col-md-4 col-sm-6 col-lg-3 card">
        <img src="img/img2.jpg" alt=""> <span class="caption">Lorem ipsum dolor
        sit amet, consectetur adipisicing elit. Iste, voluptatem.</span>
        <a href="###" class="card-heading"><strong>Lorem ipsum dolor
        sit.</strong></a>
        <div class="card-content text-muted">
          Lorem ipsum dolor sit amet, consectetur adipisicing elit. Vitae,
          officia similique enim culpa ipsam voluptas. Quibusdam, tempora autem
          voluptatem aliquid!
        </div>
        <div class="card-actions">
          <button class="btn">查看</button>
        </div>
      </div>
      <div class="col-md-4 col-sm-6 col-lg-3 card">
        <img src="img/img2.jpg" alt=""> <span class="caption">Lorem ipsum dolor
        sit amet, consectetur adipisicing elit. Iste, voluptatem.</span>
        <a href="###" class="card-heading"><strong>Lorem ipsum dolor
        sit.</strong></a>
        <div class="card-content text-muted">
          Lorem ipsum dolor sit amet, consectetur adipisicing elit. Vitae,
          officia similique enim culpa ipsam voluptas. Quibusdam, tempora autem
          voluptatem aliquid!
        </div>
        <div class="card-actions">
          <button class="btn btn-primary">订购</button>
        </div>
      </div>
      <div class="col-md-4 col-sm-6 col-lg-3 card">
        <img src="img/img2.jpg" alt=""> <span class="caption">Lorem ipsum dolor
        sit amet, consectetur adipisicing elit. Iste, voluptatem.</span>
        <a href="###" class="card-heading"><strong>Lorem ipsum dolor
        sit.</strong></a>
        <div class="card-content text-muted">
          Lorem ipsum dolor sit amet, consectetur adipisicing elit. Vitae,
          officia similique enim culpa ipsam voluptas. Quibusdam, tempora autem
          voluptatem aliquid!
        </div>
        <div class="card-actions">
          <button class="btn btn-success">参与讨论</button>
        </div>
      </div>
      <div class="col-md-4 col-sm-6 col-lg-3 card">
        <img src="img/img2.jpg" alt=""> <span class="caption">Lorem ipsum dolor
        sit amet, consectetur adipisicing elit. Iste, voluptatem.</span>
        <a href="###" class="card-heading"><strong>Lorem ipsum dolor
        sit.</strong></a>
        <div class="card-content text-muted">
          Lorem ipsum dolor sit amet, consectetur adipisicing elit. Vitae,
          officia similique enim culpa ipsam voluptas. Quibusdam, tempora autem
          voluptatem aliquid!
        </div>
        <div class="card-actions">
          <button class="btn btn-danger">喜欢</button>
        </div>
      </div>
    </section>
    <footer>
      <ul class="pager">
        <li class="previous">
          <a href="#">« 上一页</a>
        </li>
        <li>
          <a href="#">1</a>
        </li>
        <li>
          <a href="#">⋯</a>
        </li>
        <li>
          <a href="#">6</a>
        </li>
        <li class="active">
          <a href="#">7</a>
        </li>
        <li>
          <a href="#">8</a>
        </li>
        <li>
          <a href="#">9</a>
        </li>
        <li>
          <a href="#">⋯</a>
        </li>
        <li>
          <a href="#">12</a>
        </li>
        <li class="next">
          <a href="#">下一页 »</a>
        </li>
      </ul>
    </footer>
  </div>
</div>
